<template>
  <!-- 课程搜索卡片-->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="课程名称" style="width: 270px;">
        <el-input placeholder="请输入课程名称"
                  v-model="searchCourseForm.courseName"
                  @keydown.enter="search"></el-input>
      </el-form-item>
      <el-form-item label="课程描述" style="width: 290px;">
        <el-input placeholder="请输入课程描述"
                  v-model="searchCourseForm.description"
                  @change="search">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 课程列表 -->
  <el-card style="margin:20px;">
    <el-table :data="courseArr">
      <el-table-column label="课程编号" type="index" prop="courseId" width="80" align="center"></el-table-column>
      <el-table-column label="课程名称" prop="courseName" align="center"></el-table-column>
      <el-table-column label="课程描述" prop="description" align="center"></el-table-column>
      <el-table-column label="课程价格" prop="price" align="center"></el-table-column>
      <el-table-column label="课程讲师" prop="teacherId" align="center"
                       :formatter="teacherTypeFormatter"></el-table-column>
      <el-table-column label="课程分类" prop="categoryId" align="center"></el-table-column>
    </el-table>
  </el-card>

  <!-- 课程详情弹窗 -->
  <el-dialog
      :title="dialogTitle" v-model="dialogVisible" :before-close="handleClose"
      style="width: 80%;padding: 40px">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="课程名称">{{ selectedCourse.courseName }}</el-descriptions-item>
      <el-descriptions-item label="课程描述">{{ selectedCourse.description }}</el-descriptions-item>
      <el-descriptions-item label="课程价格">{{ selectedCourse.price }}</el-descriptions-item>
      <el-descriptions-item label="课程分类">{{ selectedCourse.categoryId }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ selectedCourse.createTime }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ selectedCourse.updateTime }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>





</template>

<script setup>
import {ref, onMounted} from 'vue';
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//获取当前用户信息
const user = ref(getUser());
//定义变量用来控制弹窗是否出现
const dialogVisible = ref(false);
//定义变量用来保存弹窗的标题
const dialogTitle = ref('课程详情');
//定义对象用来保存用户的搜索条件
const searchCourseForm = ref({
  courseName: '',
  description: ''
})
//定义数组用来保存课程列表数据
const courseArr = ref([]);
//定义一个方法用来获取课程列表数据
const search = () => {
  let data = qs.stringify(searchCourseForm.value);
  axios.get(BASE_URL + '/course/select/?' + data)
      .then((response) => {
        if (response.data.code == 2000) {
          courseArr.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
//一进入页面就加载课程列表数据
onMounted(() => {
  search();
})

// 定义讲师映射对象
const teacherMap = ref({
  101: '张三',
  102: '李四',
  103: '王五',
  104: '赵六',
  105: '孙七',
  106: '周八',
  107: '吴九',
  108: '郑十',
  109: '冯十一',
  110: '陈十二'
});
//定义一个格式化函数，用于将课程讲师ID转换为讲师名字
const teacherTypeFormatter = (row, column, cellValue, index) => {
  // row: 当前行的数据对象
  // column: 当前列的信息（包括label、prop等）
  // cellValue: 当前单元格的值（即讲师ID）
  // index: 当前行的索引

  // 使用teacherMap映射对象查找对应的讲师名字
  // 如果找到对应的讲师名字，则返回该名字；否则返回'未知讲师'
  return teacherMap.value[cellValue] || '未知讲师';
}
//定义重置搜索条件的方法
const resetSearch = () => {
  searchCourseForm.value = {
    courseName: '',
    description: ''
  };
  search();
}

//定义对象用来保存课程详情数据
const selectedCourse = ref({
  courseName: '',
  description: '',
  teacherId: '',
  price: '',
  categoryId: '',
  createTime: '',
  updateTime: '',
});
//定义加载课程详情方法
const loadDetail = (id) => {
  dialogVisible.value = true;
  console.log(id);
  axios.get(BASE_URL + '/course/detail/' + id)
      .then((response) => {
        if (response.data.code == 2000) {
          selectedCourse.value = response.data.data;
          console.log(selectedCourse.value);
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
const handleClose = () => {
  if (confirm('您确认要关闭弹窗吗?')) {
    dialogVisible.value = false;
  }
}


</script>


<style scoped>/* 添加一些样式以确保对齐 */
.el-table .cell {
  text-align: left; /* 默认左对齐 */
}
</style>